<template>
    <rx-layout>
        <div slot="center">
            <a-form :form="form" style="height: 100%;">
                <a-row>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.fieldKey','字段标识')">
                            <a-select :placeholder="i18n('form.fieldKey','字段标识')" :options="fieldDatas" v-decorator="['fieldName',{rules: [{ required: true, message: i18n('form.fieldKey','字段标识','input')}] }]" @change="fieldChange"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.prompts','空文本提示')">
                            <rx-input-i18n :placeholder="i18n('form.prompts','空文本提示')" v-decorator="['emptytext']" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="showDefault">
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.remarks','字段备注')">
                            <a-input :placeholder="i18n('form.remarks','字段备注')" v-decorator="['fieldLabel',{rules: [{ required: true, message:i18n('form.remarks','字段备注','input')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.typeComparison','比较类型')">
                            <a-select :placeholder="i18n('form.typeComparison','比较类型')" :options="opData" v-decorator="['fieldOp']"></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="!showDefault">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.remarks','字段备注')">
                            <a-input :placeholder="i18n('form.remarks','字段备注')" v-decorator="['fieldLabel',{rules: [{ required: true, message: i18n('form.remarks','字段备注','input')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="$comi18('rxDialog.dialog', '对话框')">
                            <rx-input-button ref="dialog" @click="selectDialog" v-decorator="['dialog',{rules: [{ required: true, message: i18n('form.dialog','对话框','input') }] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.multiSelect','是否多选')">
                            <a-radio-group v-decorator="['multiSelect',{rules: [{ required: true, message:i18n('form.select','请选择')}] }]" @change="defaultValClear">
                                <a-radio :value="true">{{i18n('isMap.yes','是')}}</a-radio>
                                <a-radio :value="false">{{i18n('isMap.no','否')}}</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.ctlValue','控件值')">
                            <a-select :options="sqlFields" v-decorator="['valueField']" @change="defaultValClear"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.ctlText','控件文本')">
                            <a-select :options="sqlFields" v-decorator="['textField']" @change="defaultValClear"/>
                        </a-form-item>
                    </a-col>
                </a-row>


                <a-row v-show="showSearchJson">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.configuration','参数配置')">
                            <rx-grid :columns="paramsColumns"
                                     :dataSource="paramsData"
                                     ref="params"
                                     :showPage="false"
                                     style="height:200px;"
                                     :bordered="true">
                                <span slot="bindVal" slot-scope="{text,record,index,blur}">
                                  <a-select v-model="record.bindVal" :options="queryAry" @change="onChangeBinVal($event,record)"/>
                                </span>
                                <span slot="isRequired" slot-scope="{text,record,index,blur}">
                                    <a-switch v-model="record.isRequired"/>
                                </span>
                            </rx-grid>
                        </a-form-item>
                    </a-col>
                </a-row>


                <a-row v-show="showDefault">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.default','默认值')">
                            <rx-input-button ref="defaultValRef" v-model="defaultVal" :multiValue="false" :single="false" @click="onDialogShow"/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </rx-layout>

</template>

<script>
    import {Dialog,RxInputButton,RxLayout,RxInputI18n} from "@lowcode/jpaas-common-lib";
    import miniQuery from './miniQuery';
    import FormBoListApi from "@/api/form/core/formBoList";
    export default {
        name: "miniQuery_dialog",
        mixins:[miniQuery],
        components:{
            RxInputButton,
            RxLayout,
            RxInputI18n
        },
        data() {
            return {
                sqlFields:[],
                defaultVal:"",
                queryAry:[],
                paramsData:[],
                showSearchJson:false,
                paramsColumns:[
                    {title: this.$comi18('rxDialog.paramName', '参数名称'), dataIndex: 'fieldName', width: 120},
                    {title: this.$ti18('rxForm.bindValue','绑定值'), dataIndex: 'bindVal', width: 120,scopedSlots: {customRender: 'bindVal'}},
                    {title: this.$ti18('rxForm.required','是否必填'), dataIndex: 'isRequired', width: 120,scopedSlots: {customRender: 'isRequired'}}
                ],
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "miniQuery", key);
            },
            customSetData(data, fieldDats,queryAry) {
                let self=this;
                this.mdl=Object.assign({multiSelect:false},this.mdl);
                this.$refs.dialog.setVal(this.mdl.dialog,this.mdl.dialog_name);
                this.sqlFields = this.mdl.sqlFields || [];
                var defaultValConf=this.mdl.defaultValConf;
                if(defaultValConf){
                    this.defaultVal=JSON.parse(defaultValConf).defaultVal;
                }
                if(this.mdl.params){
                    var params=this.mdl.params || '[]';
                    this.paramsData=JSON.parse(params);
                    this.showSearchJson=true;
                }
                queryAry.map(function(item){
                    if(item.idx_!=self.mdl.idx_) {
                        let fieldName = self.$i18(item.i18nJson,item.fieldName)||item.fieldName;
                        self.queryAry.push({
                            value: 'Q_'+fieldName+'_S'+(item.fieldOp?'_'+item.fieldOp:''),
                            label: item.fieldLabel,
                            i18nJson:item.i18nJson
                        });
                    }
                });
            },
            customGetData(){
                var dialog = this.$refs.dialog.getVal();
                this.mdl.params = JSON.stringify(this.$refs.params.getData());
                this.mdl.dialog=dialog.value;
                this.mdl.dialog_name=dialog.text;
                this.mdl.sqlFields=this.sqlFields;
                var defaultValConf={type:'dialog',defaultVal:this.defaultVal};
                this.mdl.defaultValConf=JSON.stringify(defaultValConf);
            },
            selectDialog(vm){
                Dialog.openFormBoListDialog({
                    curVm: this, widthHeight: ['800px', '600px'],data:{isDialog:'YES'}
                }, function (self, data) {
                    var item=data[0];
                    self.defaultValClear();
                    self.loadFields(item);
                    vm.setVal(item.key,item.name);
                })
            },
            onChangeBinVal(e,record){
                if(!e){
                    record.bindName="";
                    record.i18nJson="";
                }else{
                    let obj = this.queryAry.find(item=> {
                        return e==item.value;
                    });
                    record.bindName=obj.label;
                    record.i18nJson=obj.i18nJson;
                }
            },
            loadSearchJsons(data){
                if(!data.searchJson){
                    return;
                }
                var typeJson = {string: "S", int: "I", date: "D", float: "F"};
                var searchJson =  JSON.parse(data.searchJson);
                searchJson = searchJson.filter(item => item.type == 'income');
                if (searchJson && searchJson.length > 0) {
                    this.paramsData = searchJson.map(function (item) {
                        var tablePre = item.tablePre ? item.tablePre + "." : "";
                        var type = typeJson[item.dataType] ? typeJson[item.dataType] : "S";
                        var param = item.autoFilter == 'YES' ? "Q_" + tablePre + item.fieldName + "_" + type + "_" + item.fieldOp : item.fieldName;
                        return {
                            fieldName:  item.fieldLabel,
                            field: param,
                            bindVal: "",
                            bindName:"",
                            isRequired:false
                        }
                    });
                }
                this.showSearchJson=true;
            },
            loadFields(row){
                let self_=this;
                FormBoListApi.get(row.pkId).then(res=>{
                    var data=res.data;
                    var fieldsStr=data.fieldsJson;
                    self_.loadSearchJsons(data);
                    if(!fieldsStr) return;
                    var fileds=JSON.parse(fieldsStr);
                    var ary=[];
                    fileds.map(function(item){
                        if(item.isReturn) {
                            ary.push({
                                value: item.field,
                                label: item.header
                            })
                        }
                    })
                    this.sqlFields=ary;
                })
            },
            defaultValClear(){
                this.$refs.defaultValRef.handClose();
            },
            onDialogShow(vm){
                var dialog = this.$refs.dialog.getVal();
                dialog=dialog.value;
                var valueField=this.form.getFieldValue('valueField');
                var textField=this.form.getFieldValue('textField');
                var single=this.form.getFieldValue('single');
                if(!dialog){
                    vm.$message.error(vm.$ti18('rxMsa.masWarn.configDialog',"请配置对话框"));
                    return;
                }
                Dialog.dialog({key:dialog},{
                    curVm: vm
                },function(data){
                    var rows=data.rows || data;
                    if(rows!=null && rows.length>0){
                        var values=[];
                        var texts=[];
                        if(single) {
                            values.push(rows[0][valueField]);
                            texts.push(rows[0][textField]);
                        }else{
                            for (var i = 0; i < rows.length; i++) {
                                values.push(rows[i][valueField]);
                                texts.push(rows[i][textField]);
                            }
                        }
                        vm.setVal(values.join(','),texts.join(','));
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>